<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>便利贴</title>
  <script crossorigin="anonymous"
    integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ=="
    src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    #app h1 {
      color: #fff;
      background-color: rgb(245, 66, 50);
      padding: 20px;
    }

    #app .content {
      width: 60vw;
      margin: 0 auto;
    }

    #app .content h2 {
      padding: 40px 0;
    }

    #app .content form {
      display: flex;
      justify-content: flex-start;
    }

    #app .content input {
      border: none;
      outline: none;
      background: none;
    }

    #app .content form input[type="text"] {
      flex: 5;
      height: 60px;
      border: 1px solid #ccc;
      border-radius: 5px;
      line-height: 60px;
      font-size: 30px;

    }

    #app .content form input[type="submit"] {
      margin: 0 40px;
      flex: 1;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
      font-size: 30px;
      color: rgb(245, 66, 50);
    }

    #app .content form input[type="submit"]:hover {
      background: rgb(245, 66, 50);
      color: #fff;
    }


    #app .content ul li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333333;
      margin: 20px 0;
    }

    #app .content ul li span {
      cursor: pointer;
      color: #ccc;
    }

    #app .content ul li span:hover {
      color: rgb(245, 66, 50);
    }

    #app .content ul li input {
      margin-right: 20px;
      font-size: 30px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 2em;
      height: 0.85em;
      background: #ddd;
      border-radius: 1em;
      position: relative;
      cursor: pointer;
      outline: none;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }

    #app .content ul li input:checked {
      background: rgb(245, 66, 50);
    }

    #app .content ul li input::after {
      position: absolute;
      content: "";
      width: 0.85em;
      height: 0.85em;
      border-radius: 50%;
      background: #fff;
      -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
      box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
      -webkit-transform: scale(.7);
      transform: scale(.7);
      left: 0;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out
    }

    #app .content ul li input:checked::after {
      left: calc(100% - 0.95em);

    }

    #app .content ul li p {
      flex-basis: 100%;
    }


    #app .content>div {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #app .content>div ol {
      display: flex;
      justify-content: flex-end;
    }

    #app .content>div ol li {
      padding: 10px 40px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 0 20px;
      cursor: pointer;
    }

    #app .content>div ol li.active {
      background: rgb(245, 66, 50);
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>便利贴</h1>
    <div class="content">
      <h2>添加任务</h2>
      <form action="" @click.prevent="">
        <input type="text" placeholder="添加任务" v-model="inputVal">
        <input type="submit" value="添加" @click="addTask">
      </form>
      <div>
        <h2>任务列表</h2>
        <ol>
          <li :class="key === 0? 'active' : ''" @click="setKey(0)">所有任务</li>
          <li :class="key === 1? 'active' : ''" @click="setKey(1)">未完成任务</li>
          <li :class="key === 2? 'active' : ''" @click="setKey(2)">已完成任务</li>
        </ol>
      </div>

      <ul>
        <li v-for="(val,index)  in showList "><input type="checkbox" name="" id="" v-model="val.key" :key="val.id">
          <p>{{val.content}}</p><span @click="del(index)">X</spa>
        </li>
      </ul>
    </div>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        inputVal: '',
        taskList: [
          {
            id: +new Date(),
            key: false,
            content: '看电视'
          }
        ],
        key: 0,
      },
      computed: {
        showList() {
          if (!this.key) {
            return this.taskList;
          } else if (this.key == 1) {
            return this.taskList.filter(item => !item.key)
          } else if (this.key == 2) {
            return this.taskList.filter(item => item.key)
          }
        }
      },
      methods: {
        addTask() {
          if (this.inputVal == "") {
            return alert('任务不能为空')
          }
          this.taskList.push({ id: +new Date(), key: false, content: this.inputVal })
          this.inputVal = '';
        },
        setKey(i) {
          this.key = i;
        },
        del(i) {
          this.taskList = this.taskList.map((val, index) => {
            if (index !== i) {
              return val;
            }
          })
        }
      },
    })
  </script>
</body>

</html>